import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('ListView'),
        ),
        // body: ListView.builder(
        //   itemCount: 100,
        //   itemExtent: 50, //强制高度为50
        //   itemBuilder: (BuildContext context, int index) {
        //     return ListTile(title: Text('$index'),);
        //   },
        // ),

        // body: new ListView.separated(
        //   itemCount: 100,
        //   itemBuilder: ((BuildContext context, int index) {
        //     return ListTile(title: Text('$index'),);
        //   }),
        //   //分割器构造器
        //   separatorBuilder: (BuildContext context, int index) {
        //     return index%2==0?divider1:divider2;
        //   },
        // ),
        body: new InfiniteListView(),
      ),
    );
  }
}

class InfiniteListView extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _InfiniteListViewState();
  }
}

class _InfiniteListViewState extends State<InfiniteListView> {
  static const loadingTag = '##loading##'; // 表位标记
  var _words = <String>[loadingTag];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _writeData();
  }

  void _writeData() {
    Future.delayed(Duration(seconds: 2)).then((e) {
      _words.insertAll(
          _words.length - 1,
          //每次生成20个单词
          generateWordPairs().take(20).map((e) => e.asPascalCase).toList());
      setState(() {
        //重新构建
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Column(
      children: <Widget>[
        ListTile(
          title: new Text('商品列表'),
          subtitle: new Text('副标题'),
        ),
        new Expanded(
          child: new ListView.separated(
            itemCount: _words.length,
            itemBuilder: (context, index) {
              //如果到了表尾
              if (_words[index] == loadingTag) {
                if (_words.length <= 100) {
                  //获取数据
                  _writeData();
                  // 加载显示loading
                  return Container(
                    padding: const EdgeInsets.all(16),
                    alignment: Alignment.center,
                    child: SizedBox(
                      width: 24,
                      height: 24,
                      child: CircularProgressIndicator(
                        strokeWidth: 2,
                      ),
                    ),
                  );
                } else {
                  //已经加载一百条数据，不再获取
                  return new Container(
                    alignment: Alignment.center,
                    padding: EdgeInsets.all(16),
                    child: new Text('没有更多了',
                        style: TextStyle(fontSize: 14, color: Colors.grey)),
                  );
                }
              }
              return ListTile(
                title: Text(_words[index]),
              );
            },
            separatorBuilder: (context, index) {
              return Divider(
                height: 0.5,
                color: Colors.lightGreenAccent,
              );
            },
          ),
        )
      ],
    );
  }
}
